<template>
  <div class="from">
    <div class="bodyer">
      <slot></slot>
    </div>
    <div class="footer">
      <slot name="footer">
        <button class="button" @click="onClick">点击提交</button>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { formSymbolKey } from './config.js';
import { ref, onMounted, onUnmounted, provide, useSlots } from 'vue';

const props = defineProps({
  rules: { type: String, default: () => ({}) },
  model: { type: Object, default: () => ({}) }
})

//  用来记录, 主要是用来记录错误的属性
const fileds = ref({}); //  增加策略模式

const addField = () => { }

const deleteField = () => { }

const clearField = () => { }

//  验证器 - 用来检查是否通过，如果没有通过 则将其添加到fileds 里面去
const validate = async () => {
  //  验证数据是否通过
  for (let key in rules) {
    fileds[key] = ''; //  返回错误提示信息  
    const items = rules[key] || [];
    const formData = props.model.value;

    if (!Array.isArray(items)) throw new Error(key, ': 验证条件必须是数组');

    for (let item of items) {
      if (item.required) {  //  判断是不是要求必填
        if (!isRequired(key, item, formData[key])) {  //  如果当前条件验证失败，则退出循环
          break;
        };
      } else {  //  只需要支持传入函数  
        if(!isAccessCheck(key, item, formData[key])) {  //  如果当前条件验证失败，则退出循环
          break;
        }
      }
    }
  }
}

//  判断数据是否为空
function isRequired(key, rule, data) {
  if (data.length <= 0) {
    fileds[key] = rule?.message;
    return false;
  } else {
    fileds[key] = ''; // 无错误信息
    return true;
  }
}

//  判断数据是否通过验证
function isAccessCheck(key, rule, data) {
  const func = rule.rule;
  if (!func()) {  //  执行 判断返回值 是否为 true
    fileds[key] = rule?.message;
    return false;
  } else {
    fileds[key] = '';
    return true;
  }
}


//  处理数据
function setResult() {

}

//  点击 进行验证
const onClick = () => {
  validate();
  provide()
}

//  抛出
provide(formSymbolKey, {
  ...toRefs(props),
  
})

//  监听
onMounted(() => {

})

//  清除指定的 表单元素 避免干扰
onUnmounted(() => {

})
</script>

<style lang="scss" scoped>
.from {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .bodyer {
    flex: 1;
  }
}
</style>